<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米登录</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="less/sign.css">
</head>
<body>

<div id="App">
    <top></top>
    <mi-main></mi-main>
    <mi-footer></mi-footer>
</div>



<template id="top">
    <div class="top">
        <img :src="topImg" alt="">
    </div>
</template>
<template id="main">
    <div class="main">
        <div class="sign-box">
            <div class="component-sign">
                <sign-table></sign-table>
            </div>
        </div>
    </div>
</template>
<template id="signTable">
    <div class="sign">
        <div class="sign-in">
            <a href="#" :class="{now:isNow,'sign-intext':true}" @click.prevent="taggle">账号登录</a>
            <span class="intext-line">|</span>
            <a href="#" :class="{now:!isNow,'sign-code':true}" @click.prevent="taggle">扫码登录</a>
        </div>
        <keep-alive>
            <sign-body v-if="isNow"></sign-body>
        </keep-alive>
        <sign-code v-if="!isNow"></sign-code>
    </div>
</template>
<template id="signCode">
    <div class="sign-reweima">
        <div class="erweima-img">
            <img :src="codeImg" alt="">
        </div>
        <p>使用<span>小米商城APP</span>扫一扫</p>
        <p>小米手机可打开「设置」>「小米帐号」扫码登录</p>
    </div>
</template>
<template id="signBody">
    <div class="sign-form">
        <sign-id v-if='istel' :signtel="tel" @fun="changeSign($event)"></sign-id>
        <sign-tel v-if="isid" :signid="miid" @fun="changeSign($event)"></sign-tel>
    </div>
</template>
<template id="signId">
    <div class="sign-id">
        <input type="text" class="text-id" placeholder="邮箱/手机号/小米ID">
        <input type="password" class="text-password" placeholder="密码">
        <input type="button" class="btn-sign" value="登录">
        <div class="sign-alse">
            <a href="#" class="sign-phone" @click.prevent="talSign">{{ signtel }}</a>
            <div class="sign-fpass">
                <a href="#">立即注册</a> | <a href="#">忘记密码?</a>
            </div>
            <div class="sign-other">
                <p>其他登录方式</p>
            </div>
            <div class="other-i">
                <a href="#" title="QQ登录" class="other-1"><i></i></a>
                <a href="#" title="微博登录" class="other-2"><i></i></a>
                <a href="#" title="支付宝登录" class="other-3"><i></i></a>
                <a href="#" title="微信登录" class="other-4"><i></i></a>
            </div>
        </div>
    </div>
</template>
<template id="signTel">
    <div class="sign-tel">
        <div class="sign-number">
            <div class="number-area">
                <transition appear name="tel">
                    <span v-show="isshow" key="tel">+86</span>
                </transition>
            </div>
            <input type="text" class="text-account text-phone" placeholder="手机号码">
        </div>
        <div class="sign-verification">
            <div class="number-verification">
                <a href="#">获取验证码</a>
            </div>
            <input type="password" class="text-mes text-verification" placeholder="短信验证码">
        </div>
        <input type="button" class="btn-sign" value="立即登录/注册">
        <div class="sign-alse">
            <a href="#" class="sign-phone" @click.prevent="talSign">{{signid}}</a>
            <div class="sign-other">
                <p>其他登录方式</p>
            </div>
            <div class="other-i">
                <a href="#" title="QQ登录" class="other-1"><i></i></a>
                <a href="#" title="微博登录" class="other-2"><i></i></a>
                <a href="#" title="支付宝登录" class="other-3"><i></i></a>
                <a href="#" title="微信登录" class="other-4"><i></i></a>
            </div>
        </div>
    </div>
</template>
<template id="miFooter">
    <div class="xiaomi-foot">
        <p class="foot-fir">
            <a href="#" class="foot-current">简体</a>|<a href="#">繁体</a>|<a href="#">English</a>|<a href="#">常见问题</a>
        </p>
        <p class="foot-last">小米公司版权所有-京ICP备10046444-
            <a href="#"><img src="images/ghs.png" alt=""></a>京公网安备11010802020134号-京ICP证110507号</p>
    </div>
</template>
<script>

    Vue.component('top',{
        template: '#top',
        data: function () {
            return{
                topImg:'./images/mistore_logo.png'
            }
        }
    })
    Vue.component('mi-main',{
        template: '#main',
        data: function () {
            return{
                topImg:'./images/mistore_logo.png'
            }
        },
    })
    Vue.component('signTable',{
        template: '#signTable',
        data: function () {
           return{
              isNow:true
           }
        },
        methods: {
            taggle(){
                this.isNow = ! this.isNow
            }
        },
        components: {
            'signBody':{
                template: '#signBody',
                data(){
                    return{
                        idTel:true,
                        tel:'手机短信登录/注册',
                        miid:'用户名密码登录',
                        istel:true,
                        isid:false
                    }
                },
                methods:{
                    changeSign(mes){
                        if(mes===this.tel){
                            this.istel=false
                            this.isid=true
                        }else{
                            this.istel=true
                            this.isid=false
                        }
                    }
                },
                components: {
                    signId:{
                        template:'#signId',
                        props:['signtel'],
                        methods:{
                            talSign(){
                                this.$emit('fun',this.signtel)
                            }
                        }
                    },
                    signTel:{
                        template:'#signTel',
                        data(){
                            return{
                                isshow:false
                            }
                        },
                        props: ['signid'],
                        methods:{
                            talSign(){
                                this.$emit('fun',this.signid)
                            }
                        },
                        created(){
                            setTimeout(()=>{
                                this.isshow=true
                            },100)

                        }
                    }

                }
            },
            'signCode':{
                template: '#signCode',
                data(){
                    return{
                        codeImg: './images/sign-erweima.png'
                    }
                }
            }
        }
    })
    Vue.component('miFooter',{
        template:'#miFooter'
    })

    const vm = new Vue({
        el: '#App',
        data: {

        },
        methods: {

        }
    })
</script>
</body>
</html>